<template>
  <div>
    <h3>发表评论</h3>
    <hr />
    <textarea placeholder="请输入要BB的内容" v-model="msg"></textarea>
    <mt-button type="primary" size="large" @click="addcoment"
      >发表评论</mt-button
    >
    <div class="cmt-list">
      <!-- <div class="one" v-if="flag">
        <div class="cmt-title">
          第{{ comment.length }}楼 用户: 发表时间：
          {{ Date.now() | dateformat("YYYY-MM-DD HH:mm:ss") }}
        </div>
        <div class="cmt-body">
          {{
            comment == "underfined"
              ? "不想鸟你"
              : comment[comment.length - 1].content
          }}
        </div>
      </div> -->

      <div class="cmt-item" v-for="(item, idx) in comment" :key="idx">
        <div class="cmt-title">
          第{{ idx + 1 }}楼 用户: {{ item.user_name }} 发表时间：{{
            item.add_time | dateformat("YYYY-MM-DD HH:mm:ss")
          }}
        </div>
        <div class="cmt-body">
          {{ item.content == "underfined" ? "不想鸟你" : item.content }}
        </div>
      </div>
    </div>
    <mt-button type="danger" size="large" plain @click="more">
      加载更多
    </mt-button>
  </div>
</template>
<script>
import { pinglun, addpinglun } from "../../static/api";
export default {
  data() {
    return {
      comment: [{}],
      addcomment: [],
      page: 1,
      msg: "",
      // flag:true
    };
  },
  async created() {
    this.comment = await pinglun(this.newsid, this.page);
    // if(this.comment.length<1){
    //   this.flag=false
    // }
  },
  methods: {
    async more() {
      this.page++;
      this.comment += await pinglun(this.newsid, this.page);
      console.log(this.page);
    },
    async addcoment() {
      if (this.msg.trim().length == 0) {
        return alert("不能为空");
      }
      // this.comment=[]
      this.addcomment = await addpinglun(this.newsid, {
        content: this.msg.trim(),
      });
      //  this.comment = await pinglun(this.newsid, this.page);
      var cmt = {
        user_name: "匿名函数",
        add_time: "Date.now()",
        content: this.msg.trim(),
      };
      this.comment.push(cmt);
      this.msg = "";
    },
  },
  props: ["newsid"], //接收父组件传递的id
};
</script>
<style lang="scss" scoped>
div {
  h3 {
    font-size: 20px;
  }
  textarea {
    height: 80px;
    margin-bottom: 2px;
  }
  .cmt-list {
    margin-top: 5px;
    .cmt-title {
      font-size: 13px;
      background-color: #ccc;
    }
    .cmt-body {
      font-size: 14px;
      padding: 5px 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 40px;
    }
    .cmt-item {
      height: 50px;
      .cmt-title {
        font-size: 13px;
        background-color: #ccc;
      }
      .cmt-body {
        font-size: 14px;
        padding: 5px 20px;
      }
    }
  }
}
</style>
